<template>
    <div class="chugui">
        <div class="body">
            <div class="jump">
                <h1 class="jump-item" @click="slide(0)">产品分类 <span :class="this.show0==true?'rotate':''">+</span></h1>
                <div class="router" v-show="this.show0">
                    <router-link to="/productList">橱柜</router-link>
                    <router-link to="/productList">衣柜</router-link>
                    <router-link to="/productList">全屋</router-link>
                    <router-link to="/productList">榻榻米</router-link>
                    <router-link to="/productList">木门</router-link>
                </div>
            </div>
            <div class="jump">
                <h1 class="jump-item" @click="slide(1)">产品分类 <span :class="this.show1==true?'rotate':''">+</span></h1>
                <div class="router" v-show="this.show1">
                    <router-link to="/">橱柜</router-link>
                    <router-link to="/">衣柜</router-link>
                    <router-link to="/">全屋</router-link>
                    <router-link to="/">榻榻米</router-link>
                    <router-link to="/">木门</router-link>
                </div>
            </div>
        </div>
        <div class="body-bot">
            <h1 class="phone">了解更多详情咨询客服，<a href="tel:400-0188-608">致电：400-0188-608</a></h1>
            <div class="bot-box">
                <router-link to="/">管理登录</router-link>
                <router-link to="/">订单查询</router-link>
                <router-link to="/">嘉宝网点</router-link>
                <router-link to="/">活动动态</router-link>
                <router-link to="/">荣誉资质</router-link>
            </div>
            <p class="hao"><img src="@/assets/index/hao.png" alt=""></p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

export default {
    name: 'bottom',
    data () {
        return {
            username:"",
            phone:"",
            message:'嘉宝官网移动端首页报名',
            description:'嘉宝官网移动端首页报名',
            local:'嘉宝官网移动端首页报名',
           
            litter:[],
            categoryName:'橱柜',
            show0:true,
            show1:false
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
        
    },
    methods:{
       slide(item){
           if(item==0){
               this.show0= !this.show0
           }else if(item==1){
               this.show1= !this.show1
           }
       }

    },
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
.chugui 
    background #fafafa
    margin-top 0.2rem
    overflow hidden
img 
    width 100%
.body 
   chugui_body()
.jump 
    width 100%
    border-bottom 1px solid #b3b1b1
.jump-item 
    width 100%
    padding 0.2rem 0
   
.jump-item>span 
    float right
.router>a
    display block
    margin-left 0.2rem
    padding 0.15rem 0
.rotate 
    transform rotate(45deg)
    transition all 0.3s
.body-bot
    margin 0 0.2rem
.phone 
    font-size 0.2rem
.phone>a 
    color #0000ff
.bot-box 
    margin-top 0.3rem
    margin-left -0.18rem
    margin-bottom 0.13rem
.bot-box>a
    display inline-block
    padding 0 0.15rem 
    border-right 1px solid black
.bot-box>a:last-child 
    border none
.hao>img 
    width 3.58rem
.hao 
    margin-bottom 3.1rem
</style>
